<template>
  <div>
    <div class="filter_container">
      <el-form :inline="true" :model="problemTicket">
        <el-form-item label="城市">
          <el-select v-model="deptNameproblemTicket" placeholder="请选择城市" size="small" style="width: 100px;"
            @change="handleCityproblemTicket" ref="deptNameRef" @keydown.native="selectBlur($event)">
            <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName"
              :value="{value:house.id,label:house.deptName}"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="后台单号">
          <el-input v-model.trim="problemTicket.xmbzNo" size="small" style="width: 160px"
            @keyup.enter.native="handleFilterproblem()" clearable placeholder="请输入后台单号"></el-input>
        </el-form-item>
        <el-form-item label="平台单号">
          <el-input v-model.trim="problemTicket.platformNo" size="small" style="width: 140px"
            @keyup.enter.native="handleFilterproblem()" clearable placeholder="请输入平台单号"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model.trim="problemTicket.operator" size="small" style="width: 130px"
            @keyup.enter.native="handleFilterproblem()" clearable placeholder="请输入申请人"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model.number="problemTicket.phone" size="small" onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
            maxlength="11" onafterpaste="value=value.replace(/[^\-?\d.]/g,'')" style="width: 140px" clearable
            @keyup.enter.native="handleFilterproblem()" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="problemTicket.handleState" clearable placeholder="请选择处理状态" size="small"
            style="width: 150px;" ref="handleStateRef" @keydown.native="selectBlur($event)">
            <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in dealstatusList" :key="index"
              size="small"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门失误类型">
          <ele-multi-cascader clearable v-model="addproblemList" :options="errorTypeList"
            separator=">" placeholder="请选择部门失误类型" style="width: 280px;"></ele-multi-cascader>
        </el-form-item>
        <!-- @clickItem = changePromiseItem -->

        <el-form-item label="创建工单时间">
          <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
          <el-date-picker v-model="Launchdate4" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm" :clearable="false" align="right" size="small"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleFilterproblem()" size="small"
            icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain @click="handShowTalFrom()" icon="el-icon-plus" size="small">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table :data="problemTicketList" border style="width: 100%" header-row-class-name="header-row-class-name"
        cell-class-name="table-cell-class-name">
        <el-table-column prop="complaintLevelName" label="等级" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="getcomplaintLevelClass(scope.row.complaintLevel )">{{scope.row.complaintLevelName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cityName" label="城市" width="80" align="center"></el-table-column>
        <el-table-column prop="xmbzNo" label="后台单号" width="80" align="center"> </el-table-column>
        <el-table-column prop='orderDetailCakes[0].goodsName' label="蛋糕款式" width="180" align="center"></el-table-column>
        <el-table-column prop="complaintContent" label="投诉内容" min-width="240">
          <template slot-scope="scope">
            <pre>{{scope.row.complaintContent}}</pre>
          </template>
        </el-table-column>
        <el-table-column prop="platformNo" label="平台单号" width="100" align="center"> </el-table-column>
        <el-table-column prop="createTime" label="创建工单时间" width="180" align="center"> </el-table-column>
        <el-table-column prop="processingResults" label="处理结果" width="100" align="center"> </el-table-column>
        <el-table-column prop="operator" label="申请人" width="80" align="center"> </el-table-column>
        <el-table-column prop="personLiable" label="责任人" width="80" align="center"> </el-table-column>
        <el-table-column prop="orderChannel" label="订单渠道" width="80" align="center"> </el-table-column>
        <el-table-column prop="complaintChannelName" label="投诉渠道" width="80" align="center"> </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" align="center"> </el-table-column>
        <el-table-column prop='responsibleDepartmentErrorText' label="部门失误类型" width="250" align="center">
        </el-table-column>
        <el-table-column width="300" align="center" label='图片附图' :key="2">
          <template slot-scope="scope">
            <div class="photoWallboard">
              <img :src="item" v-for="(item,index) in changeExtJson(scope.row.extJson)" :key="index" class="showExplain"
                @click="handBigPhoto(item)">
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="endTime" label="结案时间" width="180" align="center"> </el-table-column>
        <el-table-column prop="handleStateName" label="处理状态" width="180" align="center"> </el-table-column>
        <el-table-column prop="offsetTime" label="操作" width="120" fixed='right' align="center">
          <template slot-scope="scope">
            <el-button size="mini" plain @click="handlerProblem(scope.row, 'view')"
              style="margin-left: 0;padding: 7px;margin-bottom: 2px;margin-right: 2px;"
              v-xmbz-permission="'classification_problem_view'">查看</el-button>
            <el-button size="mini" plain @click="handlerProblem(scope.row, 'update')"
              style="margin-left: 0;padding: 7px;margin-bottom: 2px;margin-right: 2px;"
              v-xmbz-permission="'classification_problem_edit'">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="problemTicket.page" :limit.sync="problemTicket.size"
        @pagination="getPrombleList" />
    </div>

    <addDialog ref="addDialog" @added="getPrombleList" :errorTypeList="errorTypeList" :dealstatusList="dealstatusList"></addDialog>
    <editDialog ref="editDialog" @updated="getPrombleList" :errorTypeList="errorTypeList" :dealstatusList="dealstatusList"></editDialog>
    <imgDialog ref="imgDialog"></imgDialog>
  </div>
</template>

<script>
import addDialog from './addDialog.vue';
import editDialog from './editDialog.vue';
import imgDialog from '@/components/dialog/imgDialog'
import Pagination from "@/components/Pagination" // 分页
import {
  getWorkOrderProblemPage, //问题编辑
} from "@/api/workorder"
export default {
  props: {
    cityList: {
      type: Array,
      default: () => []
    },
    dealstatusList: {
      type: Array,
      default: () => []
    },
    errorTypeList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      addproblemList: [],  // 添加问题投诉显示列表
      problemTicket: {
        cityId: "",
        page: 1, //页码
        size: 10, //每页页码
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformNo: "", //第三方平台单号
        phone: "", //手机号
        handleState: "", // 处理状态
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        responsibleDepartment: "", //责任部门
        departmentErrorType: "" //失误类型
      },
      deptNameproblemTicket: "",
      Launchdate4: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      problemTicketList: [],
      total: 0,
    };
  },
  methods: {
    getPrombleList () {
      // 问题工单列表
      this.problemTicket['responsibleDepartmentErrors'] = this.addproblemList
      getWorkOrderProblemPage(this.problemTicket).then(response => {
        this.problemTicketList = response.data.data.rows
        this.total = response.data.data.total
      })
    },
    handleFilterproblem () {
      this.problemTicket.page = 1
      this.problemTicket.responsibleDepartment = this.responsibleDepartmentOtherIds
      if (this.Launchdate4) {
        this.problemTicket.workOrderStartTime = this.dayjs(this.Launchdate4[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.problemTicket.workOrderEndTime = this.dayjs(this.Launchdate4[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.problemTicket.workOrderStartTime)
      var time2 = Date.parse(this.problemTicket.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.getPrombleList()
      }
    },
    handShowTalFrom () {
      this.$refs.addDialog.show()
    },
    getcomplaintLevelClass (complaintLevel) {
      if (complaintLevel > 3) {
        return 'danger'
      }
      if (complaintLevel > 2) {
        return 'warning'
      }
      return 'info'
    },
    changeExtJson (list) {
      if (!list) {
        return
      }
      return JSON.parse(list).img
    },
    handBigPhoto (src) {
      this.$refs.imgDialog.show(src)
    },
    handlerProblem (row, status) {
      this.$refs.editDialog.show(row, status)
    },
    handleCityproblemTicket (data) {
      if (data) {
        this.deptNameproblemTicket = data.label
        this.problemTicket.cityId = data.value
      } else {
        this.problemTicket.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content
        this.deptNameproblemTicket = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content
      }
    },
  },
  mounted() {
    this.getPrombleList()
  },
  components: {
    Pagination,
    addDialog,
    editDialog,
    imgDialog
  }
};
</script>
<style lang="scss" scoped>
.photoWallboard {
  .showExplain {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>